<template>
  <div class="list-container" ref="FatherBrower">
      <div v-for="(i, index) in ListData" :key="index" class="list-item">
          <div class="list-item-info">
              <img class="list-item-info-img" :src="i.index_image || '/public/4.jpg'" >
              <div class="list-item-info-details">
                  <div class="list-item-info-title">标题: {{i.title || '未设置'}}</div>
                  <div class="list-item-info-date">
                      日期: {{ i.date || ''}}
                  </div>
                  <div class="list-item-info-meta">
                      <div>{{i.kind || '分类'}}</div>
                      <div>{{i.resource || '资源'}}</div>
                  </div>
              </div>
          </div>
          <div class="list-item-func">
              <div v-for="(item,index2) in FuncColumn" :key="index2">
                  <button class="list-item-func-button" @click="DealItemClick(item.onclick,i,item)">{{ item.label }}</button>
              </div>
          </div>

          <component
              v-if="dynamicComponent[i.id]"
              :is="dynamicComponent[i.id].component"
              :id="i.id"
              :data="dynamicComponent[i.id].props.data"
              @close="dynamicComponent[i.id]=null"
              :key="i.id"
          />
      </div>
      <div v-if="ListData==undefined || ListData.length==0"
           style="text-align: center;user-select: none;">
          暂无数据~
      </div>
      <div class="brower-box" ref="BrowerBox"></div>
  </div>
</template>

<script setup>
import { defineModel, defineEmits, onMounted, ref, reactive } from 'vue'
const ListData = defineModel('ListData')
const FuncColumn = defineModel('FuncColumn')
const BrowerBox = ref(null)
const FatherBrower = ref(null)
const dynamicComponent = reactive({})
const EMITS = defineEmits(['LoadMore'])

const init_brower = () => {
  const target = BrowerBox.value
  if (!target) return;
  const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log(1)
              EMITS('LoadMore')
          }
      });
  }, {
      rootMargin: '0px',
      threshold: 0.1
  });
  observer.observe(target);
}

const cache = new Map();
const DealItemClick = async (callback, item, row) => {
  const data = await callback(item)
  if (data == undefined) return;
  if (row.DOM && !cache.has(row.DOM)) {
      cache.set(row.DOM, import(row.DOM).then(m => m.default || m)); 
  }
  const MyDom = row.DOM ? await cache.get(row.DOM) : null; 

  if (MyDom) {
      dynamicComponent[data.id] = {
          component: MyDom,
          props: {
              id: item.id, 
              data: data,
          }
      };
  } else if(!row.DOM) {
  } else {
  }
}

onMounted(() => {
  init_brower()
})
</script>

<style scoped>
.list-container { 
}

.list-item {
  display: flex;
  min-height: 100px; 
  background-color: rgb(252, 247, 247);
  margin-bottom: 10px;
  justify-content: space-between;
  position: relative;
  border-radius: 8px;
  padding: 10px; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.list-item-info {
  width: 60%;
  display: flex;
  gap: 15px; 
  align-items: center;
  flex-grow: 1; 
}

.list-item-info-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px; 
  flex-shrink: 0; 
}


.list-item-info-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px; 
  flex-grow: 1; 
  overflow: hidden; 
}

.list-item-info-title {
  font-weight: 800;
  font-size: 1.1em;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.list-item-info-date {
  font-size: 0.9em;
  color: #555;
}

.list-item-info-meta {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  margin-top: 5px;
}

.list-item-info-meta > div {
  text-align: center;
  padding: 3px 8px; 
  background-color: #e9e9eb; 
  border-radius: 12px;
  color: #5c6170; 
  font-size: 0.8em;
}

.list-item-func {
  width: 30%;
  min-width: 150px;
  background-color: #f8f8f9;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: 0;
  padding: 0 10px;
  border-left: 1px solid #eee;
}

.list-item-func-button {
  background-color: #dee3f1;
  color: rgb(48, 44, 44);
  border: none;
  border-radius: 5px;
  padding: 8px 12px; 
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s, color 0.2s;
}

.list-item-func-button:hover {
  background-color: #c8cee0;
  color: black;
}

.brower-box {
  height: 30px;
  width: 100%;
}




@media (max-width: 768px) {
  .list-item {
      flex-direction: column; 
      align-items: stretch;
      height: auto;
  }

  .list-item-info,
  .list-item-func {
      width: 100%; 
  }
  
  .list-item-info-img {
      width: 70px; 
      height: 70px;
  }

  .list-item-info-title {
      font-size: 1em; 
      white-space: normal; 
  }
  
  .list-item-info-meta {
      flex-wrap: wrap;
  }

  .list-item-func {
      margin-top: 15px; 
      padding: 10px 0; 
      border-left: none; 
      border-top: 1px solid #eee; 
      justify-content: flex-start; 
      gap: 10px; 
      flex-wrap: wrap; 
  }

  .list-item-func-button {
      padding: 6px 10px;
  
  }
}


@media (max-width: 480px) {
  .list-item {
      padding: 10px; 
  }
  .list-item-info {
      flex-direction: column; 
      align-items: center;
      text-align: center;
      gap:10px;
  }

  .list-item-info-img {
      width: 80px;
      height: 80px;
      margin-bottom: 10px;
  }

  .list-item-info-details {
      align-items: center; 
  }
  
  .list-item-info-title {
      font-size: 1.1em; 
  }

  .list-item-info-meta {
      justify-content: center;
  }

  .list-item-func {
      justify-content: center;
  }
  .list-item-func > div { 
  }
  .list-item-func-button {
    
  }
}
</style>